<style type="text/css">

    .bg-pink .overflow {
        border-bottom: 1px solid #f8769a;
    }
    .nav.nav-tabs{margin-bottom: 0px;}
    .table{border:1px solid rgba(0,0,0,0.08);text-align: center;}
    .table thead{background: #f6f6f6;}
    .table thead th{border-bottom: 1px!important;text-align: center;}

    
</style>
<link rel="stylesheet" href="/modules/assets/morris/morris.css">
<div>
    <div class="page-title q-tit-change" style="margin:10px;"> 
        <a href="/analysis/index">数据分析</a> > 客户数据 
    </div>
    <div class="col-sm-12">
        
        <div class="panel panel-default">
            <div class="page-title" style="padding-bottom: 10px;"> 
                <h4 class="title">客户增长数据</h4>
            </div>
            <div class="row">
                
                <div class="col-sm-3">
                    <div class="q_index_showstatus bg338ee3">
                        <div class="overflow ">
                            今日新增
                        </div>
                        <div class="m-0 counter fans">0</div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="q_index_showstatus bg00aeae">
                        <div class="overflow ">
                            本周新增
                        </div>
                        <div class="m-0 counter user">0</div>
                    </div>
                </div>
                <div class="col-sm-3" style="">
                    <div class="q_index_showstatus bg717cb6">
                        <div class="overflow ">
                            本月新增
                        </div>
                        <div class="m-0 counter vip">0</div>
                    </div>
                </div>
                <div class="col-sm-3" style="">
                    <div class="q_index_showstatus bg-pink">
                        <div class="overflow ">
                            总客户数
                        </div>
                        <div class="m-0 counter customers">0</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-12" style="padding: 0px;">
            <ul class="nav nav-tabs ">
                <li class="active" >
                    <a href="#home" data-toggle="tab" aria-expanded="true" style="border-left: none;">
                        <span class="visible-xs"><i class="fa fa-home"></i></span>
                        <span class="hidden-xs">客户概况</span>
                    </a>
                </li>
                <li class=""  >
                    <a href="#profile" data-toggle="tab" aria-expanded="false" >
                        <span class="visible-xs"><i class="fa fa-user"></i></span>
                        <span class="hidden-xs">客户增长</span>
                    </a>
                </li>
               <!--  <li class="" >
                    <a href="#messages" data-toggle="tab" aria-expanded="false">
                        <span class="visible-xs"><i class="fa fa-envelope-o"></i></span>
                        <span class="hidden-xs">类型分析</span>
                    </a>
                </li> -->
                <li class="" >
                    <a href="#settings" data-toggle="tab" aria-expanded="false">
                        <span class="visible-xs"><i class="fa fa-cog"></i></span>
                        <span class="hidden-xs">标签分析</span>
                    </a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="home">
                    <div class="col-sm-5" style="padding-left: 0px;">
                        <div class="spread-echarts" style="margin-top: -50px;">
                            <div id="echart1" style="height: 400px;"></div>
                        </div>
                    </div>
                    <div class="col-sm-7">
                        <table class="table comeWhere">
                            <thead>
                            <tr>
                                <th style="">来源渠道</th>
                                <th>客户数</th>
                            </tr>
                            </thead>
                            <tbody>
                                <!-- <tr>
                                    <td class="middle-align"><i class="fa fa-circle cfb4155 m-r-15"></i>微信</td>
                                    <td class="middle-align">335</td>
                                </tr> -->
                            </tbody>
                        </table>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="tab-pane" id="profile">
                    <div class="spread-echarts">
                        <div id="echart2" style="height: 300px;"></div>
                    </div>
                    <div class="legend-list-wrap">
                        <ul class="legend-list">
                            <li class="legend-item"><i class="fa fa-circle m-r-15" style="color:#fb4155"></i>新增客户</li>
                        </ul>
                    </div>
                </div>
               <!--  <div class="tab-pane" id="messages">
                    <div class="col-sm-5" style="padding-left: 0px;">
                        <div class="spread-echarts">
                            <div id="echart3" style="height: 300px;"></div>
                        </div>
                    </div>
                    <div class="col-sm-7">
                        <table class="table">
                            <thead>
                            <tr>
                                <th style="">类型</th>
                                <th>客户数</th>
                                <th>占比</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td class="middle-align"><i class="fa fa-circle cfb4155 m-r-15"></i>意向</td>
                                <td class="middle-align">335</td>
                                <td class="middle-align">10%</td>
                            </tr>
                            <tr>
                                <td class="middle-align"><i class="fa fa-circle cff8f6e m-r-15"></i>正式</td>
                                <td class="middle-align">310</td>
                                <td class="middle-align">20%</td>
                            </tr>
                            <tr>
                                <td class="middle-align"><i class="fa fa-circle cffe659 m-r-15"></i>其他</td>
                                <td class="middle-align">234</td>
                                <td class="middle-align">30%</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="clear"></div>


                </div> -->
                <div class="tab-pane" id="settings">
                    <div class="col-sm-5" style="padding-left: 0px;">
                        <div class="spread-echarts">
                            <div id="echart3" style="height: 300px;"></div>
                        </div>
                    </div>
                    <div class="col-sm-7">
                        <table class="table signCont">
                            <thead>
                            <tr>
                                <th style="">标签</th>
                                <th>客户数</th>
                                <th>占比 (%)</th>
                            </tr>
                            </thead>
                            <tbody>
                                <!-- <tr>
                                    <td class="middle-align"><i class="fa fa-circle cfb4155 m-r-15"></i>已联系</td>
                                    <td class="middle-align">335</td>
                                    <td class="middle-align">10%</td>
                                </tr> -->
                            </tbody>
                        </table>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/modules/js/waypoints.min.js" type="text/javascript"></script>
<script src="/modules/js/jquery.counterup.min.js" type="text/javascript"></script>

<script src="/modules/js/echarts/echarts.common.min.js"></script>
<script src="/modules/js/echarts/customed.js"></script>

<script type="text/javascript">
    seajs.use('analysis/customer');
</script>